<template>
  <div>
    <div style="height: 40px;line-height: 40px;">
      <span style="margin-left: 20px;font-size: 16px;">{{fileName}}</span>
      <div v-if="paramKey.indexOf('-')==-1" style="float: right; margin-right: 20px;">
        <div>
          <el-upload
              name="file"
              ref="upload"
              action=" "
              :limit="1"
              :file-list="fileList"
              :before-upload="beforeUpload"
              style="width: 90px; float: left;"
          >
            <el-button slot="trigger" size="mini" >导入excel</el-button>
          </el-upload>
          <el-button :loading="downloadBtnLoading" size="mini" @click="downloadCurrent" style="margin: 0px !important;">导出excel</el-button>
          <el-divider direction="vertical"/>
          <el-input v-model="versionName" size="mini" placeholder="请输入版本信息" style="width: 200px;"></el-input>
          <el-button size="mini" @click="backupData">备份数据</el-button>
          <el-divider direction="vertical"/>
          <el-button  size="mini"
                     v-clipboard:copy="copyAuthCode()"
                     v-clipboard:success="copyLinkSuccess"
                     v-clipboard:error="copyLinkError">
            复制分享码
          </el-button>
        </div>
        <div style="clear: both;"/>
      </div>
      <div v-else style="float: right; margin-right: 20px;">
        <div>
          <el-button :loading="downloadBtnLoading" size="mini" @click="downloadCurrent" style="margin: 0px !important;">导出excel</el-button>
        </div>
        <div style="clear: both;"/>
      </div>
    </div>
    <!--<div id="excelOnline" style="margin-top:40px;padding-bottom:40px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>-->
    <div style="position: relative;height: calc(100vh - 60px);">
      <div id="luckysheet" style="margin:0;padding:0;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
    </div>
  </div>
</template>

<script>

import {backupData} from '../page/api'
import LuckyExcel from 'luckyexcel'
//导入库export.js 这个文件是es6的，不能在普通的HTML文件直接引入js文件（虽然都是js文件，但是有区别，具体请百度es6与es5）！需要把es6转es5才可以直接引入使用！
import {exportSheetExcel} from './export'
import {importExcel} from './api'

export default {
  name: 'ExcelLayout',
  components: {},
  data(){
    return{
      paramKey: undefined,
      fileName: undefined,
      versionName:undefined,
      fileList: [],
      loadUrl: undefined,
      loadSheetUrl: undefined,
      updateUrl: undefined,
      downloadBtnLoading: false
    }
  },
  created() {
    this.paramKey = this.$route.query.paramKey
    this.fileName = this.$route.query.fileName
    let userName = this.$store.state.user.user.name
    this.loadUrl = process.env.VUE_APP_SERVER_URL+"nosql/excel/load/"+this.paramKey
    this.loadSheetUrl = process.env.VUE_APP_SERVER_URL+"nosql/excel/loadSheet/"+this.paramKey
    //this.updateUrl = process.env.VUE_APP_SERVER_URL_WS+"nosql/luckysheet/ws/" + userName + "/"+this.paramKey
    this.updateUrl = process.env.VUE_APP_SERVER_URL_WS+"luckysheet/ws/" + userName + "/"+this.paramKey
    this.init()
  },
  mounted() {
  },
  methods:{
    init() {
      let options = {
        container: 'luckysheet', //luckysheet为容器id
        showinfobar: false,
        title: this.fileName, // 设定表格名称
        lang: 'zh', // 设定表格语言
        gridKey:this.paramKey,
        row:1000,
        allowUpdate: true,
        loadUrl: this.loadUrl,
        loadSheetUrl: this.loadSheetUrl,
        updateUrl: this.updateUrl
      }
      luckysheet.create(options)
    },
    backupData() {
      if (!this.versionName) {
        this.$message.warning("请输入版本信息");
        return
      }
      const versionFullName = this.fileName+"-"+this.versionName;
      //api
      let param = {}
      param.id=this.paramKey
      param.versionName=versionFullName
      backupData(param).then(r=>{
        if (r.success) {
          this.$message.success(r.content);
        }else{
          this.$message.error(r.content);
        }
      })
    },
    beforeUpload(file) {
      const _this = this
      let suffix = file.name.substring(file.name.length-5);
      if (suffix !== ".xlsx" ) {
        this.$message.error("文件格式只能是.xlsx");
        return false;
      }
      LuckyExcel.transformExcelToLucky(file, (exportJson, luckysheetfile) =>{
        if (exportJson.sheets == null || exportJson.sheets.length == 0) {
          this.$message.warning("读取excel文件内容失败，目前不支持xls文件!");
          return;
        }
        const data = {}
        data.paramKey = this.paramKey
        data.luckysheetfile = luckysheetfile
        importExcel(data).then(r=>{
          luckysheet.destroy(); // 先销毁当前容器
          luckysheet.create({
            container: 'luckysheet',
            showinfobar:false,
            //data:exportJson.sheets,
            //title:exportJson.info.name,
            userInfo:exportJson.info.name.creator,
            allowUpdate: true,
            loadUrl: _this.loadUrl,
            loadSheetUrl: _this.loadSheetUrl,
            updateUrl: _this.updateUrl
          });
        })
      });
    },
    /*下载excel*/
    // https://blog.csdn.net/zinchliang/article/details/120262185
    // https://blog.csdn.net/qq_44706619/article/details/124467187
    downloadCurrent() {
      this.downloadBtnLoading = true

      setTimeout(()=>{
        exportSheetExcel(luckysheet.getluckysheetfile(), this.fileName)
        setTimeout(()=>{
          this.downloadBtnLoading = false
        }, 3000)
      }, 100)

    },

    // copy auth code
    copyAuthCode(row) {
      return this.paramKey;
    },
    copyLinkSuccess () {
      this.$message({
        message: '复制成功',
        type: 'success'
      });
    },
    copyLinkError () {
      this.$message.error("复制失败");
    },


  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 16px;
    line-height: 46px;
    color: #333333;
  }
}
</style>

<style lang="less" scoped>
  #mytaskwaitingmenu {
    cursor: pointer;
    color: #666;
    :hover{
      color: red;
    }
  }

  #task_mytaskwaiting {
    width: 100%;
    height: 100%;
    /*padding-right: 10px;*/

    .header {
      height: 40px;
      width: 100%;
      font-size: 15px;
      /*align-items: center;*/
      text-align: center;
      display: flex;
      color: #666;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      /*border-radius: 15px;*/
    }

    .seamless-warp {
      height: calc(~"100% - 100px");
      width: 100%;
      /*overflow: hidden;*/
      overflow: auto;
      font-size: 14px;

      .item {
        width: 100%;
        height: 100%;
        list-style: none;
        line-height: 40px;
        margin: 0;
        padding: 0 2px 0 2px;

        li {
          width: 100%;
          height: 100%;
          cursor: pointer;
          color: #666;
          :hover{
            color: red;
          }
          span {
            width: 25%;
            font-weight: normal;
            text-align: center;
            float: left;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            padding-left: 10px;
          }
        }
      }
    }
  }
</style>
